<template>
  <div>
    <h2>自定义指令</h2>
    <p v-color="c">hello world</p>
    <input type="text" v-focus />
    <hr />
    <my-input></my-input>
  </div>
</template>

<script>
import MyInput from "./components/MyInput.vue";
export default {
  components: { MyInput },
  data() {
    return {
      c: "red",
    };
  },
  // 自定义指令
  directives: {
    // 指令：{
    // el表示使用这个指令的元素  obj.value表示指令的值
    //   bind(el,obj){}, // 只会执行一次，可以在里面对元素进行样式的设置
    //   inserted(el,obj){}, // 只会执行一次，可以在里面对元素进行行为操作，比如让元素获得焦点
    //   update(el,obj){}, // 数据更新后会执行
    //   componentUpdated(el,obj){}, // 数据更新后包括子组件的数据也更新后，会执行
    //   unbind(el,obj){}, // 指令解绑的时候(组件销毁的时候)
    // },
    // 指令(el,obj){}, // 这个函数写法，它相当于bind和update方法
    color: {
      bind(el, obj) {
        el.style.color = obj.value;
      },
      update(el, obj) {
        el.style.color = obj.value;
      },
    },
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style></style>